<template>
  <div class="approve-create">
    <el-dialog :visible.sync="open" width="960px" :close-on-click-modal="false" :title="title" :before-close="handleClose">
      <el-form ref="form" :model="form">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" placeholder="标题" />
        </el-form-item>
        <el-form-item label="选择部门" prop="deptId">
          <select-tree v-model="form.deptId" title="部门" />
        </el-form-item>
        <el-form-item label="选择多个部门" prop="deptIds">
          <!-- <select-tree v-model="form.deptIds" :multi="true" title="多个部门" /> -->
        </el-form-item>
        <el-form-item label="单张上传" prop="file">
          <single-upload
            :file-obj="form.file"
            height="232px"
            width="380px"
            placeholder="请上传图片"
            support-pattern="图片文件（.png、.jpg、.jpeg、.bmp）10M以内"
            accept="image/jpeg,image/png,image/jpg,image/bmp"
            :file-suffix="['.png', '.jpg', '.jpeg', '.bmp']"
            :file-size="10"
            @uploadChange="handleUploadChangeFile"
          />
        </el-form-item>
        <el-form-item label="多张上传" prop="fileLists">
          <multiple-uploads
            :file-list="form.fileLists"
            placeholder="请上传文件"
            support-pattern="图片文件（.png、.jpg、.jpeg、.bmp）10M以内"
            accept="image/jpeg,image/png,image/jpg,image/bmp"
            :file-suffix="['.png', '.jpg', '.jpeg', '.bmp']"
            :file-size="10"
            :file-num="3"
            @uploadChange="handleUploadChangeFileLists"
          />
        </el-form-item>
        <approve-step ref="approveStep" v-model="approveStep" :user-list="userList" @change="(value) => (approveStep = value)" />
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleSave">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
const uploadFile = () => {
  return new Promise((resolve, reject) => {
    const res = {
      code: 0,
      msg: null,
      data: { url: 'http://wentou.xvkeji.com/admin/sys-file/digital-xiwei/1e2a1b0a9eba4bdaa9ddd9c0fa3cd355.doc' },
    };
    setTimeout(() => {
      if (res.data) {
        resolve(res);
      } else {
        reject(res.msg);
      }
    }, 300);
  });
};
const approveStep = [
  {
    id: 'start',
    name: '发起人',
    type: 'start',
    camundaType: 'startEvent',
    userIds: null,
    userInfoVos: null,
    setType: null,
    selectMode: null,
    selectRange: null,
    examineMode: null,
    state: null,
    optionUserIds: null,
    optionUserInfos: null,
  },
  {
    id: 'approver_1',
    name: '审核人',
    type: 'approver',
    camundaType: 'userTask',
    userIds: ['3', '8'],
    userInfoVos: [
      {
        userId: '3',
        deptId: '1',
        roleIds: null,
        username: 'wangminggang',
        nickname: '王明钢',
        deptName: '山东',
        avatar: '/admin/sys-file/digital-xiwei/00eeb21922c44c75a33e4dc5ac28b2e0.jpg',
      },
      {
        userId: '8',
        deptId: '1',
        roleIds: null,
        username: 'liuyunyun',
        nickname: '柳云云',
        deptName: '山东',
        avatar: '/admin/sys-file/digital-xiwei/6cbd7f5998264c78abc18c3553cea445.jpeg',
      },
    ],
    setType: 1,
    selectMode: 0,
    selectRange: 0,
    examineMode: 3,
    state: null,
    optionUserIds: null,
    optionUserInfos: null,
  },
  {
    id: 'approver_2',
    name: '审核人',
    type: 'approver',
    camundaType: 'userTask',
    userIds: ['6'],
    userInfoVos: [
      {
        userId: '6',
        deptId: '1',
        roleIds: null,
        username: 'baijunke',
        nickname: 'baijunke',
        deptName: '山东',
        avatar: null,
      },
    ],
    setType: 1,
    selectMode: 0,
    selectRange: 0,
    examineMode: 3,
    state: null,
    optionUserIds: null,
    optionUserInfos: null,
  },
  {
    id: 'approver_3',
    name: '审核人',
    type: 'approver',
    camundaType: 'userTask',
    userIds: [],
    userInfoVos: null,
    setType: 4,
    selectMode: 1,
    selectRange: 1,
    examineMode: 3,
    state: null,
    optionUserIds: null,
    optionUserInfos: null,
  },
  {
    id: 'copy_3',
    name: '抄送人',
    type: 'copy',
    camundaType: 'serviceTask',
    userIds: ['1', '87', '88', '90', '89', '91', '92', '93', '94', '96', '95', '97', '98', '99', '100', '101', '102', '103', '104', '105', '106', '107', '108'],
    userInfoVos: [
      {
        userId: '87',
        deptId: '1',
        roleIds: null,
        username: 'WT0001',
        nickname: '王威-人事',
        deptName: '陕文投',
        avatar: null,
      },
      {
        userId: '88',
        deptId: '16',
        roleIds: null,
        username: 'WT0002',
        nickname: '拜军科-风控',
        deptName: '风控合规部',
        avatar: null,
      },
      {
        userId: '89',
        deptId: '17',
        roleIds: null,
        username: 'WT0003',
        nickname: '宋洁-业务员',
        deptName: '平台事业部',
        avatar: null,
      },
      {
        userId: '90',
        deptId: '15',
        roleIds: null,
        username: 'WT0004',
        nickname: '王明钢-财务',
        deptName: '财务部',
        avatar: null,
      },
      {
        userId: '91',
        deptId: '3',
        roleIds: null,
        username: 'WT8888',
        nickname: '总经理',
        deptName: '综合管理部',
        avatar: null,
      },
      {
        userId: '92',
        deptId: '26',
        roleIds: null,
        username: 'TP0001',
        nickname: '第三方小王',
        deptName: '合作方部门',
        avatar: null,
      },
      {
        userId: '93',
        deptId: '18',
        roleIds: null,
        username: 'WT0000',
        nickname: '管理员阿威',
        deptName: '国际业务部',
        avatar: '/admin/sys-file/digital-xiwei/13a771b0bcdc433281a5d59bc840dab1.jpg',
      },
      {
        userId: '94',
        deptId: '1',
        roleIds: null,
        username: 'WT0005',
        nickname: '管理员强哥',
        deptName: '陕文投',
        avatar: '/admin/sys-file/digital-xiwei/6fb2aee2816c40e1ba42d5072dc6cd7b.jpeg',
      },
      {
        userId: '95',
        deptId: '15',
        roleIds: null,
        username: 'WT0006',
        nickname: '管理员阿刚',
        deptName: '财务部',
        avatar: '/admin/sys-file/digital-xiwei/f303ce9c9f5c4147b3fc4ce260842de2.jpg',
      },
      {
        userId: '96',
        deptId: '3',
        roleIds: null,
        username: 'WT0007',
        nickname: '管理员阿科',
        deptName: '综合管理部',
        avatar: null,
      },
      {
        userId: '97',
        deptId: '16',
        roleIds: null,
        username: 'WT0008',
        nickname: '管理员小宋',
        deptName: '风控合规部',
        avatar: '/admin/sys-file/digital-xiwei/6f0469e4eab048d38ae32ed2bee5c130.jpg',
      },
      {
        userId: '98',
        deptId: '19',
        roleIds: null,
        username: 'WT0009',
        nickname: '管理员亚欧',
        deptName: '合作发展部',
        avatar: '/admin/sys-file/digital-xiwei/97024d6e034e4bcd950c2748335ea51b.jpeg',
      },
      // {
      //   userId: '99',
      //   deptId: '16',
      //   roleIds: null,
      //   username: 'WT6666',
      //   nickname: '琴琴-风控',
      //   deptName: '风控合规部',
      //   avatar: null,
      // },
      // {
      //   userId: '100',
      //   deptId: '26',
      //   roleIds: null,
      //   username: 'youke001',
      //   nickname: '游客001',
      //   deptName: '合作方部门',
      //   avatar: null,
      // },
      // {
      //   userId: '101',
      //   deptId: '17',
      //   roleIds: null,
      //   username: 'WT0010',
      //   nickname: '管理员阿蕊',
      //   deptName: '平台事业部',
      //   avatar: null,
      // },
      // {
      //   userId: '102',
      //   deptId: '3',
      //   roleIds: null,
      //   username: 'WT0011',
      //   nickname: '管理员阿毅',
      //   deptName: '综合管理部',
      //   avatar: null,
      // },
      // {
      //   userId: '103',
      //   deptId: '3',
      //   roleIds: null,
      //   username: 'WT9999',
      //   nickname: '范帅-行政',
      //   deptName: '综合管理部',
      //   avatar: null,
      // },
      // {
      //   userId: '104',
      //   deptId: '3',
      //   roleIds: null,
      //   username: 'WT1111',
      //   nickname: '张琪--风控',
      //   deptName: '综合管理部',
      //   avatar: '/admin/sys-file/digital-xiwei/b2c55415c855406b957b16cc430457af.jpg',
      // },
      // {
      //   userId: '105',
      //   deptId: '1',
      //   roleIds: null,
      //   username: 'WT1020',
      //   nickname: '管理员亚欧2',
      //   deptName: '陕文投',
      //   avatar: null,
      // },
      // {
      //   userId: '106',
      //   deptId: '3',
      //   roleIds: null,
      //   username: 'WT2222',
      //   nickname: '刘星-业务员',
      //   deptName: '综合管理部',
      //   avatar: null,
      // },
      // {
      //   userId: '107',
      //   deptId: '19',
      //   roleIds: null,
      //   username: 'WT3333',
      //   nickname: '柳长安-总经理',
      //   deptName: '合作发展部',
      //   avatar: null,
      // },
      // {
      //   userId: '108',
      //   deptId: '15',
      //   roleIds: null,
      //   username: 'WT1000',
      //   nickname: '财务-总监',
      //   deptName: '财务部',
      //   avatar: null,
      // },
    ],
    setType: 1,
    selectMode: null,
    selectRange: null,
    examineMode: null,
    state: '0',
    optionUserIds: null,
    optionUserInfos: null,
  },
  {
    id: 'end',
    name: '流程结束',
    type: 'end',
    camundaType: 'endEvent',
    userIds: null,
    userInfoVos: null,
    setType: null,
    selectMode: null,
    selectRange: null,
    examineMode: null,
    state: null,
    optionUserIds: null,
    optionUserInfos: null,
  },
];
export default {
  components: {},
  props: {
    open: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '新 增',
    },
    formData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      form: {
        deptId: null,
        deptIds: [],
        file: {},
        fileLists: [],
      },
      approveStep: [],
      userList: [
        {
          userId: 1,
          username: 'admin',
          nickname: '管理员',
          avatar: '/admin/sys-file/digital-xiwei/ddb09dc513b249a1affd2506a31c6629.jpeg',
        },
        {
          userId: 2,
          username: 'wangyingfan',
          nickname: '王颖帆',
          avatar: null,
        },
        {
          userId: 3,
          username: 'wangminggang',
          nickname: '王明钢',
          avatar: '/admin/sys-file/digital-xiwei/00eeb21922c44c75a33e4dc5ac28b2e0.jpg',
        },
        {
          userId: 6,
          username: 'baijunke',
          nickname: 'baijunke',
          avatar: null,
        },
        {
          userId: 8,
          username: 'liuyunyun',
          nickname: '柳云云',
          avatar: '/admin/sys-file/digital-xiwei/6cbd7f5998264c78abc18c3553cea445.jpeg',
        },
        {
          userId: 10,
          username: 'wangrui',
          nickname: '王蕊',
          avatar: null,
        },
        {
          userId: 11,
          username: 'liyi',
          nickname: '李毅',
          avatar: null,
        },
      ],
    };
  },
  computed: {},
  watch: {
    formData: 'resetForm',
  },
  created() {},
  mounted() {
    setTimeout(() => {
      this.approveStep = approveStep;
    }, 300);
  },
  methods: {
    resetForm() {
      const form = {
        deptId: null,
        deptIds: [],
        file: {},
        fileLists: [],
      };
      this.$nextTick(() => {
        if (this.$refs.form) {
          this.$refs.form.resetFields();
          setTimeout(() => {
            this.form = Object.assign({}, form, this.formData);
          });
        } else {
          this.form = Object.assign({}, form, this.formData);
        }
      });
    },
    handleUploadChangeFile(file, cb) {
      if (file) {
        const params = new FormData();
        params.append('file', file, file.name);
        return uploadFile(params)
          .then((res) => {
            if (res && res.data) {
              const fileObj = {};
              fileObj.url = res.data.url;
              this.form.file = fileObj;
            }
            cb();
          })
          .catch(cb);
      }
    },
    handleUploadChangeFileLists(file, cb) {
      if (file) {
        const params = new FormData();
        params.append('file', file, file.name);
        return uploadFile(params)
          .then((res) => {
            if (res && res.data) {
              this.form.fileLists.push({ url: res.data.url });
            }
            cb();
          })
          .catch(cb);
      }
    },
    handleClose() {
      this.$emit('close');
    },
    validateApproveStep() {
      return new Promise((resolve) => {
        this.$refs.approveStep.validate((valid) => resolve(valid));
      });
    },
    handleSave() {
      this.validateApproveStep().then((res) => {
        console.log('approveStep', res, this.approveStep);
      });
    },
  },
};
</script>

<style scoped lang="scss"></style>
